<template>
    <div id="login">
        <!-- 阻止表单默认事件 -->
        <form @submit="e=>{e.preventDefault()}">
            <H1>LOGIN</H1>
            <div class="text">
                <input type="text" placeholder="请输入用户名" v-model="userInfo.userName">
            </div>
            <div class="password">
                <input type="password" placeholder="请输入密码" v-model="userInfo.password">
            </div>
            <button @click="login()" class="btn">登录</button>
        </form>
    </div>
</template>

<script>
import { userLogin } from '../../api/data';
import Mock from 'mockjs';
export default {
    name: 'Login',
    data() {
        return {
            userInfo: {
                userName: '',
                password: '',
            }
        }
    },
    methods: {
        //封装弹出警告的函数
        alertWarn(msg){
            this.$message({
                message:`${msg}`,
                type:'warning',
            });
        },
        login() {
            //如果用户名为空
            if (this.userInfo.userName === '') {
                this.alertWarn('请输入用户名!')
            //如果密码为空
            } else if (this.userInfo.password === '') {
                this.alertWarn('请输入密码!')
            } else {
                //发送请求
                userLogin(this.userInfo).then((res) => {
                    const data = res.data;
                    //登陆成功之后
                    if (data.code === 999) {
                        //使用Mock生成一个模拟token
                        const token = Mock.Random.guid();
                        //设置token
                        this.$store.commit('setToken', token);
                        //跳转到首页
                        this.$router.push({ name: 'Home' })
                    } else {
                        //登录失败，弹出错误提示(虽然不大可能失败)
                        this.$message.error(`${data.msg}!`);
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
//避免浏览器自动填充账号密码时，input样式会自动变为填充色
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px rgba(215, 229, 214, 0) inset !important;
    transition-delay: 99999s;
    transition: color 99999s ease-out, background-color 99999s ease-out;

}

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column {
    .row();
    flex-direction: column;
}

#login {
    .row();
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/background.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    form {
        .column();
        width: 400px;

        H1 {
            font-size: 24px;
            color: rgb(10, 68, 41);

        }

        .text,
        .password {
            margin-top: 20px;
            width: 100%;
            border-bottom: 2px solid rgb(5, 55, 32);

            input {
                width: 100%;
                height: 40px;
                font-size: 16px;
                background-color: rgba(215, 229, 214, 0);
                border: 0px;
                outline: none;
            }
        }

        .btn {
            margin-top: 40px;
            width: 400px;
            height: 50px;
            font-size: 18px;
            font-weight: bold;
            color: rgb(11, 107, 62);
            line-height: 50px;
            text-align: center;
            border: 0px;
            background-image: linear-gradient(to right, rgb(61, 115, 51), rgb(196, 241, 148), rgb(61, 115, 51));
            border-radius: 25px;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .7);
            cursor: pointer;
        }
    }

    input::-webkit-input-placeholder {
        color: rgb(6, 63, 37);
    }
}
</style>